<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                padding: 0;
                margin: 0;
                box-sizing: border-box;
            }
            body,html{
                font-family: '微软雅黑';
                -webkit-user-select:none;
                -moz-user-select:none;
                -ms-user-select:none;
                user-select:none;
            }
            div{
                width: 500px;
                text-align: center;
                margin: 0 auto;
            }
            #wrp{
                width: 450px;
                height: 100vh;
                display: flex;
                align-items: center;
                flex-wrap: wrap;
            }
            #result{
                flex: 0 0 100%;
                height: 120px;
                display: block;
                text-align: right;
                line-height: 120px;
                color: #ffffff;
                font-size: 46px;
                background-color: #999;
            }
            #box{
                width: 450px;
                height: 400px;
                display: flex;
                flex-wrap: wrap;
            }
            #box span{
                flex: 0 0 25%;
                display: flex;
                align-items: center;
                cursor: pointer;
                justify-content: center;
                border:1px solid #999;
                background-color: #000;
                text-align: center;
                color: #ffffff;
                font-size: 26px;
            }
            #box span:hover,
            #box span:active{
                background-color: #999;
            }
            #box #ling{
                flex: 0 0 50%;
            }
        </style>
    </head>
    <body>
        <div id="wrp">
            <div id="wrp-inner">
                <p id="result"></p>
                <div id="box">
                    <span onclick="ce()">CE</span>
                    <span onclick="del()"><</span>
                    <span onclick="num('%')">%</span>
                    <span onclick="num('/')">/</span>
                    <span onclick="num(7)">7</span>
                    <span onclick="num(8)">8</span>
                    <span onclick="num(9)">9</span>
                    <span onclick="num('*')">*</span>
                    <span onclick="num(4)">4</span>
                    <span onclick="num(5)">5</span>
                    <span onclick="num(6)">6</span>
                    <span onclick="num('-')">-</span>
                    <span onclick="num(1)">1</span>
                    <span onclick="num(2)">2</span>
                    <span onclick="num(3)">3</span>
                    <span onclick="num('+')">+</span>
                    <span id="ling" onclick="num(0)">0</span>
                    <span onclick="num('.')">.</span>
                    <span onclick="jieGuo()">=</span>
                </div>
            </div>
        </div>
        <!-- 门上吊刀，刀倒吊着
        狗咬狗狗被狗咬狗就吼，狗吼把咬狗的狗轰走，狗在也不敢狗咬狗 -->
        <script type="text/javascript">
            var result = document.querySelector('#result')
            function num(num) {
            	result.innerText += num;
                if(result.innerText.length>16){
                    result.style.fontSize = '20px'
                }
            }
            function jieGuo(){
            	result.innerText = eval(result.innerText);
            }
            function ce(){
            	result.innerText = '';
            }
            function del(){
            	result.innerText = result.innerText.slice(0,result.innerText.length-1)
            }


        </script>
    </body>
</html>